<template>
    <div class="body">
        <div class="form-container">
            <h2>注册</h2>
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm"
                :size="formSize" status-icon show-message>
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" show-password />
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="ruleForm.confirmPassword" show-password />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="tologin">
                        登录
                    </el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        注册
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { registerusr ,canuser } from "@/api/users.js"
import { useRouter } from 'vue-router';
const formSize = ref('default')
let router = useRouter()
const ruleFormRef = ref()
const rules = reactive({
    name: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    confirmPassword: [
        {
            validator(rule, value, callback) {
                if (value == '') {
                    // 校验不通过
                    return callback(new Error('请输入再次输入密码'))
                } else {
                    // 校验通过
                    if (!ruleForm.password) {
                        return callback(new Error('请输入密码'))
                    } else if (value != ruleForm.password) {
                        return callback(new Error('密码不对'))
                    } else {
                        callback()
                    }

                }
            }
        }
    ],
})
const ruleForm = reactive({
    name: '',
    password: '',
    confirmPassword: '',
})
function tologin(){
    router.push('/login')
}
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            let data = await canuser({username:ruleForm.name})
            if(data.data.status==200){
                let res = await registerusr({
                username: ruleForm.name,
                password: ruleForm.password
            })
            if (res.data.status==200) {
                router.push({
                    path: "/login",
                    query: {
                        name: ruleForm.name,
                        password: ruleForm.password
                    }
                })
                ElNotification({
                    title: 'Success',
                    message: '注册成功',
                    type: 'success',
                })
            } else {
                ElNotification({
                    title: '错误',
                    message: res.data.message,
                    type: 'success',
                })
                resetForm(formEl)
            }
            }else{
                ElNotification({
                    title: 'Success',
                    message: '用户名重复',
                    type: 'success',
                })
            }
            
        } else {
            console.log('error submit!', fields)
        }
    })
}
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style lang="css" scoped>
.body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.form-container {
    background-color: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-container h2 {
    margin-bottom: 30px;
    color: #333;
    font-size: 24px;
}

.form-container input[type="email"],
.form-container input[type="password"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.form-container input[type="email"]:focus,
.form-container input[type="password"]:focus {
    outline: none;
    border-color: #7F7FD5;
}

.form-container input[type="submit"] {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 5px;
    background-color: #7F7FD5;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.form-container input[type="submit"]:hover {
    background-color: #6B6BAA;
}
</style>